<template>
  <div class="icons" :options="swiperOption">
    <swiper>
      <swiper-slide v-for="(page,index) of pages" :key="index">
        <div class='icon' v-for="item of page" :key="item.id">
          <div class='icon-img'>
              <img class='img-in' :src='item.imgUrl'>
          </div>
          <p class='icon-text'>{{item.desc}}</p>
        </div>
      </swiper-slide>
    </swiper>
  </div>
</template>

<script>
export default {
    name:'HomeIcons',
    props:{
        list:Array
    },
    data () {
        return{
             swiperOption:{
                autoplay:false,
            }
        }
    },
    computed:{
            pages () {//实现类似轮播图的效果
                const pages=[];//用的是二维数组嵌套
                this.list.forEach(function(item,index){//对数据进行遍历
                    const page=Math.floor(index/8);//用flfloor向下取整，即8以下(0开始)都是page=0,8个一组(页)
                    if(!pages[page]){//对页数进行判断，第一页创建一个数组，第二页创建一个数组...
                        pages[page]=[];
                    }
                    pages[page].push(item)//每页数据放进对应数组里
                })
                return pages//最后在dom上用v-for遍历
        },
    }
}
</script>

<style scoped>
.icons >>>.swiper-container{
    height:0;
    padding-bottom:50%;
}
.icons{
    overflow:hidden;
    height:0;
    padding-bottom:50%;
}
.icon{
    position: relative;
    overflow: hidden;
    height:0;
    width:25%;
    padding-bottom:25%;
    float: left;
}
.icon-img{
    position: absolute;
    top:0;
    left:0;
    right:0;
    box-sizing: border-box;
    padding:0.1rem;
    bottom:0.44rem;
}
.img-in{
    height:100%;
    display: block;
    margin:0 auto;
}
.icon-text{
    position: absolute;
    left:0;
    right:0;
    bottom:0;
    height:0.44rem;
    line-height: 0.44rem;
    text-align: center;
    /* 文字太长会出现... */
    overflow: hidden;
    white-space:nowrap;
    text-overflow: ellipsis;
}
</style>